<template>
  <div class="labelContent">
    <div class="warp">
      <div class="body" @mouseover="heightFlag=true" @mouseleave="heightFlag=false">
        <div class="icon" :class="[heightFlag?'el-icon-arrow-up':'el-icon-arrow-down']" :style="{color:iconColor}" ></div>
        <div v-for="item in labelList" :key="item.id">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  data(){
    return{
      labelList:[],
      limit:9,
      page:1,
      heightFlag:false,
      iconColor:''
    }
  },
  created(){
    // this.getLabelInfo()
  },
  watch:{
    heightFlag(val){
      val?this.iconColor = '#444':this.iconColor = ''
    }
  },
  methods:{
    async getLabelInfo(){
      let res = await this.$axios.get(`${api.getLabel}?limit=${this.limit}&page=${this.page}`)
      if(res.status==200){
        this.labelList = res.data
      }else{
        this.$message.warning(res)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.labelContent{
  .warp{
    .body{
      width: 100%;
      padding: 30px 10px;
      margin: 20px auto;
      background-color: #ffffff;
      height: 30px;
      text-align: left;
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 20px 0 #f4f4f6;
      >div{
        height: 30px;
        padding: 0 20px;
        color: #606266;
        cursor: pointer;
        line-height: 30px;
        display: inline-block;
        font-size: 20px;
        &:hover{
          color: #444;
        }
      }
      &:hover{
        height: auto;
      }
      .icon{
        width: 16px;
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        position: absolute;
        background-color: transparentize($color: #606266, $amount: 0.8);
        color: white;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%);
        border-radius: 8px 8px 0 0;
      }
    }
  }
}
</style>